<template>
  <div class="globleContent p0" id="AccountBookManageAEBox">
    <div class="overflowH">
      <div class="AccBookManAERightCon">
        <div
          class="overflowH AccBookManAELab mb15"
          v-for="item in AccBookManAELabData"
          :key="item.Id"
          :data-content="item.data_content"
          @click="LoadAccBookManAELabLink($event)"
        >
          <span
            class="left AccBookManAENavTitle"
            :class="{ CurrentAccBookManAENavTitle: item.isClassActive}"
          >{{item.name}}</span>
        </div>
      </div>
      <div class="AccBookManAELeftCon">
        <div
          class="borderPosition"
          v-for="item in AccBookManAELabData"
          :key="item.Id"
          :id="item.data_content"
        >
          <h5 class="textPosition">{{item.name}}</h5>
          <div class="ContentPosition">
            <component :is="item.ContentComp" :CurrBookObj="CurrentBookObj" :allAlign="allAlign" />
          </div>
        </div>
      </div>
    </div>
    <div id="AccountAEBtnBox" class="mt10 text_center">
      <el-button
        size="small"
        v-for="item in AccountAEBtnData"
        :key="item.dataId"
        :type="item.type"
        @click="LoadAccountAEOpereate(item)"
      >{{item.name}}</el-button>
    </div>
  </div>
</template>

<script>
import accoutMsg from "./components/accoutMsg";
import numRule from "./components/numRule"; 
import accoutFormat from "./components/accoutFormat"; 
import accoutRule from "./components/accoutRule"; 
import {
  LoadAccountSaveAxios,
  LoadAccountDetailAxios,
  LoadAccountSelfElementAxios
} from "./js/accBookManaAE.js";

let _this,
  LabInitDataObj = {};
let AccBookManAELabListData = [
  {
    name: "账簿信息",
    data_content: "accoutMsg",
    Id: "001",
    isClassActive: true,
    ContentComp: "accoutMsg"
  },
  {
    name: "单号生成规则",
    data_content: "numRule",
    Id: "002",
    isClassActive: false,
    ContentComp: "numRule"
  },
  {
    name: "账簿格式",
    data_content: "accoutFormat",
    Id: "003",
    isClassActive: false,
    ContentComp: "accoutFormat"
  },
  {
    name: "对账规则",
    data_content: "accoutRule",
    Id: "004",
    isClassActive: false,
    ContentComp: "accoutRule"
  }
];
let AccountAEBtnListData = [
  {
    guid: "guis1",
    key: "/uac/system/userset",
    code: "Save",
    name: "保存",
    isvisiable: 1,
    ordernum: 1,
    classname: "el-icon-circle-plus-outline",
    action: "onSave",
    disabled: false,
    title: "保存",
    appid: "budget",
    param: null,
    config: null,
    type: "primary",
    icon: "",
    tips: "我是保存"
  },
  {
    guid: "guis2",
    key: "/uac/system/userset",
    code: "Cancel",
    name: "取消",
    isvisiable: 1,
    ordernum: 3,
    classname: "el-icon-circle-plus-outline",
    action: "onCancel",
    disabled: false,
    title: "取消",
    appid: "budget",
    param: "",
    config: "",
    type: "success",
    icon: "",
    tips: "我是取消"
  }
];
export default {
  name: "accBookManaAE",
  props: {
    BookData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    AccBookGridData:{
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      AccBookManAELabData: AccBookManAELabListData,
      LabDataObj: {},
      AccountAEBtnData: AccountAEBtnListData,
      PageTopVal: 0,
      CurrentBookObj: {},
      allAlign:"right"
    };
  },
  components: {
    accoutMsg,
    numRule,
    accoutFormat,
    accoutRule
  },
  created() {
    // if (this.BookData.dataId) {
    //   this.LoadAccountDetailData(this.BookData.dataId);
    // } else {
    //   this.CurrentBookObj = this.BookData;
    //   this.LoadAccountSelfElementData();
    // }
  },
  mounted() {
    _this = this;
    this.PageTopVal = parseInt(document.getElementById("accoutMsg").offsetTop);
    this.LoadLabDataObj();
    LabInitDataObj = _this.LabDataObj;
    Object.freeze(LabInitDataObj);
    $("#AccountBookManageAEBox")
      .parent()
      .scroll(function() {
        _this.LoadAccBookManAELabScroll();
      });
  },
  methods: {
    LoadAccBookManAELabLink(ele) {
      let AccountCurrentId = ele.currentTarget.getAttribute("data-content");
      _this.LoadLabStyle(AccountCurrentId);
      $("#AccountBookManageAEBox")
        .parent()
        .scrollTop(LabInitDataObj[AccountCurrentId] + 10);
    },
    LoadLabStyle(AccCurrId) {
      for (let i = 0; i < _this.AccBookManAELabData.length; i++) {
        if (_this.AccBookManAELabData[i].data_content == AccCurrId) {
          _this.AccBookManAELabData[i].isClassActive = true;
        } else {
          _this.AccBookManAELabData[i].isClassActive = false;
        }
      }
    },
    LoadLabDataObj() {
      let LabNavData = _this.AccBookManAELabData;
      let LabNavDataObj = {};
      for (let i = 0; i < LabNavData.length; i++) {
        LabNavDataObj[LabNavData[i].data_content] =
          document.getElementById(LabNavData[i].data_content).offsetTop -
          _this.PageTopVal;
      }
      _this.LabDataObj = LabNavDataObj;
    },
    LoadAccBookManAELabScroll() {
      _this.LoadLabDataObj();
      let ScrollTopVal = $("#AccountBookManageAEBox")
        .parent()
        .scrollTop();
      if (ScrollTopVal < _this.LabDataObj["numRule"]) {
        _this.LoadLabStyle("accoutMsg");
      } else if (
        ScrollTopVal < _this.LabDataObj["accoutFormat"] &&
        ScrollTopVal >= _this.LabDataObj["numRule"]
      ) {
        _this.LoadLabStyle("numRule");
      } else if (
        ScrollTopVal < _this.LabDataObj["accoutRule"] &&
        ScrollTopVal >= _this.LabDataObj["accoutFormat"]
      ) {
        _this.LoadLabStyle("accoutFormat");
      } else if (ScrollTopVal >= _this.LabDataObj["accoutRule"]) {
        _this.LoadLabStyle("accoutRule");
      }
    },
    LoadAccountAEOpereate(BtnData) {
      //点击保存，取消
      if (BtnData.action == "onSave") {
        let params = this.CurrentBookObj;
      //   this.$axios.post("/my/cas/book/save",params).then(res=>{
         
      // })

        // LoadAccountSaveAxios(params)
        //   .then(res => {

        //   })
        //   .catch(err => {
        //     console.log("请求失败：" + err.status + "," + err.statusText);
        //   });
      } else if (BtnData.action == "onCancel") {
        this.AccBookGridData.AccWinVisible = false;
      }
    },
    LoadAccountSelfElementData(CardDataId) {
      let params = { bookId: CardDataId };
      LoadAccountSelfElementAxios(params)
        .then(res => {
          this.CurrentBookObj.casElementPOs = res.data;
        })
        .catch(err => {
          console.log("请求失败：" + err.status + "," + err.statusText);
        });
    },
    LoadAccountDetailData(CardDataId) {
      let params = { dataId: CardDataId };
      LoadAccountDetailAxios(params)
        .then(res => {
          this.CurrentBookObj = res.data;
        })
        .catch(err => {
          console.log("请求失败：" + err.status + "," + err.statusText);
        });
    }
  }
};
</script>

<style scoped lang="less">
@import "./css/accBookManaAE.css";
</style>